<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>定时任务</title>
    <meta name="author" content=""/>
    <meta name="site" content="https://blog.52itstyle.com"/>
    <link rel="stylesheet" th:href="@{/iview/iview.css}">
    <script th:src="@{/libs/jquery-3.2.1.min.js}" type="text/javascript"></script>
    <script th:src="@{/libs/vue.min.js}" type="text/javascript"></script>
    <script th:src="@{/layer/layer.js}" type="text/javascript"></script>
    <script th:src="@{/iview/iview.min.js}" type="text/javascript"></script>
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
    </style>

    <style type="text/css">
        .ivu-form-item-label {
            text-align: right;
            vertical-align: middle;
            float: left;
            font-size: 12px;
            color: #495060;
            line-height: 1;
            padding: 10px 12px 10px 0;
            box-sizing: border-box;
            width: 80px;
        }

        .ivu-input1 {
            display: inline-block;
            width: 155px;
            height: 32px;
            line-height: 1.5;
            padding: 4px 7px;
            font-size: 12px;
            border: 1px solid #dddee1;
            border-radius: 4px;
            color: #495060;
            background-color: #fff;
            background-image: none;
            position: relative;
            cursor: text;
            transition: border .2s ease-in-out, background .2s ease-in-out, box-shadow .2s ease-in-out;
        }
    </style>
</head>
<body>
<div id="app" v-cloak style="margin: 30px">
  <!--  <input v-model="formQuartz.jobName" :value.sync="formQuartz.jobName" placeholder="请输入任务名称" required/>
    <input v-model="formQuartz.jobGroup" :value.sync="formQuartz.jobGroup" placeholder="请输入任务分组"/>
    <input v-model="formQuartz.description" :value.sync="formQuartz.description" placeholder="请输入任务描述"/>
    <input v-model="formQuartz.jobClassName" :value.sync="formQuartz.jobClassName" placeholder="请输入执行类"/>
    <input v-model="formQuartz.cronExpression" :value.sync="formQuartz.cronExpression" placeholder="请输入任务执行时间"/>
-->
   <!-- <template>
            <i-form v-ref:form-quartz :model="formQuartz" :label-width="80">
                <Form-item label="任务名称" prop="jobName">
                    <i-input  v-model="formQuartz.jobName"  :value.sync="formQuartz.jobName" placeholder="请输入任务名称" required="required"></i-input>
                </Form-item>
                <Form-item label="任务分组" prop="jobGroup" >
                    <i-input  v-model="formQuartz.jobGroup" :value.sync="formQuartz.jobGroup" placeholder="请输入任务分组" required="required"></i-input>
                </Form-item>
                <Form-item label="任务描述" prop="description">
                    <i-input  v-model="formQuartz.description" :value.sync="formQuartz.description" placeholder="请输入任务描述" required="required"></i-input>
                </Form-item>
                <Form-item label="执行类" prop="jobClassName">
                    <i-input v-model="formQuartz.jobClassName" :value.sync="formQuartz.jobClassName" placeholder="请输入执行类" required="required"></i-input>
                </Form-item>
                <Form-item label="执行时间" prop="cronExpression">
                    <i-input v-model="formQuartz.cronExpression" :value.sync="formQuartz.cronExpression" placeholder="请输入任务执行时间" required="required"></i-input>
                </Form-item>
            </i-form>
    </template>-->
    <form>
        <table>
            <div class="ivu-form-item">
                <label class="ivu-form-item-label">任务名称</label>
                <div class="ivu-form-item-content" style="margin-left: 80px;">
                    <div class="ivu-input-wrapper ivu-input-type" value="">
                        <i class="ivu-icon ivu-icon-load-c ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                        <input autocomplete="off" spellcheck="false" type="text" placeholder="请输入任务名称"
                               class="ivu-input1" v-model="formQuartz.jobName" :value.sync="formQuartz.jobName">
                    </div>
                </div>
            </div>
            <div class="ivu-form-item">
                <label class="ivu-form-item-label">任务分组</label>
                <div class="ivu-form-item-content" style="margin-left: 80px;">
                    <div class="ivu-input-wrapper ivu-input-type" value="">
                        <i class="ivu-icon ivu-icon-load-c ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                        <input autocomplete="off" spellcheck="false" type="text" placeholder="请输入任务分组"
                               class="ivu-input1" v-model="formQuartz.jobGroup" :value.sync="formQuartz.jobGroup">
                    </div>
                </div>
            </div>
            <div class="ivu-form-item">
                <label class="ivu-form-item-label">任务描述</label>
                <div class="ivu-form-item-content" style="margin-left: 80px;">
                    <div class="ivu-input-wrapper ivu-input-type" value="">
                        <i class="ivu-icon ivu-icon-load-c ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                        <input autocomplete="off" spellcheck="false" type="text" placeholder="请输入任务描述"
                               class="ivu-input1" v-model="formQuartz.description" :value.sync="formQuartz.description">
                    </div>
                </div>
            </div>
            <div class="ivu-form-item">
                <label class="ivu-form-item-label">执行类</label>
                <div class="ivu-form-item-content" style="margin-left: 80px;">
                    <div class="ivu-input-wrapper ivu-input-type" value="">
                        <i class="ivu-icon ivu-icon-load-c ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                        <input autocomplete="off" spellcheck="false" type="text" placeholder="请输入执行类" class="ivu-input1"
                               v-model="formQuartz.jobClassName" :value.sync="formQuartz.jobClassName">
                    </div>
                </div>
            </div>
            <div class="ivu-form-item">
                <label class="ivu-form-item-label">执行时间</label>
                <div class="ivu-form-item-content" style="margin-left: 80px;">
                    <div class="ivu-input-wrapper ivu-input-type" value="">
                        <i class="ivu-icon ivu-icon-load-c ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i>
                        <input autocomplete="off" spellcheck="false" type="text" placeholder="请输入任务执行时间"
                               class="ivu-input1" v-model="formQuartz.cronExpression"
                               :value.sync="formQuartz.cronExpression">
                    </div>
                </div>
            </div>
            <!--<div class="ivu-form-item">-->
                <label>参数配置</label>
            <!--</div>-->
            <div class="ivu-form-item" >
                <tr v-for='(item,index) in formQuartz.jobDataMapList'>
                    <td>
                        <input type="text" placeholder="请输入自定义参数" class="ivu-input1"
                               v-model="item.key">------------
                        <input type="text" placeholder="请输入自定义参数" class="ivu-input1"
                               v-model="item.value">
                    </td>
                </tr>
                <!--<input type="text" placeholder="请输入自定义参数value" class="ivu-input1" v-model="item.value">-->
            </div>
        </table>
    </form>
    <button v-on:click='getList'>获取</button>
    <button v-on:click='AddList'>增加一行</button>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            formQuartz: {
                jobName: '',
                jobGroup: '',
                description: '',
                jobClassName: '',
                cronExpression: '',
                //旧任务名称  用于修改
                oldJobName: '',
                oldJobGroup: '',
                jobDataMapList: [],
                jobDataMap:{}
            }
        },
        methods: {
            //新建任务(略简单)
            acceptClick: function () {
                //Validate不起作用MD
                var quartz = vm.formQuartz;
               /* if (vm.formQuartz.jobName == "" || vm.formQuartz.jobGroup == "" || vm.formQuartz.description == ""
                    || vm.formQuartz.jobClassName == "" || vm.formQuartz.cronExpression == "") {
                    alert("请输入以上完整信息");
                    return;
                }*/
                $.ajax({
                    url: "../job/add",
                    type: "post",
                    data: quartz,
                    success: function (result) {
                        if (result.code == "0") {
                            window.parent.location.reload();
                        } else {
                            vm.$Notice.error({
                                desc: '系统异常'
                            });
                        }
                    }
                });
            },
            AddList: function () {
                this.formQuartz.jobDataMapList.push({key: '', value: ''});
                console.log("list:"+JSON.stringify(this.formQuartz.jobDataMapList));
                vm.$forceUpdate();
//                console.log(JSON.stringify(this.formQuartz.jobDataMapList));
//            let len = this.formQuartz.jobDataMap.length;
                /*for(let i = 0; i < 7; i++) {
                    Vue.set(this.formQuartz.jobDataMap[i], 'key', 1);
                    Vue.set(this.formQuartz.jobDataMap[i], 'value', 2);
                }*/
                /* Vue.set(this.formQuartz.jobDataMap, 'key', "");
                 Vue.set(this.formQuartz.jobDataMap,'value', "");*/
//            this.formQuartz.jobDataMap.push({ key: '', value: '' });
//            alert(JSON.stringify(this.formQuartz.jobDataMap));
            },
            getList: function () {
                console.log(JSON.stringify(this.formQuartz.jobDataMap));
//                    console.log(value);
                /*this.formQuartz.jobDataMap.push({ key: '', value: '' });
                console.log(JSON.stringify(this.formQuartz.jobDataMap));*/
            }
        }
    })

</script>
</body>
</html>